<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
                                    <el-form-item v-if="moreSearch" label="菜单id">
                            <el-input v-model="searchFrom.menuId" placeholder="菜单id"></el-input>
                        </el-form-item>
                        <el-form-item v-if="moreSearch" label="菜单编号">
                            <el-input v-model="searchFrom.menuCode" placeholder="菜单编号"></el-input>
                        </el-form-item>
                        <el-form-item v-if="moreSearch" label="菜单名称">
                            <el-input v-model="searchFrom.menuName" placeholder="菜单名称"></el-input>
                        </el-form-item>
                        <el-form-item v-if="moreSearch" label="菜单地址">
                            <el-input v-model="searchFrom.menuUrl" placeholder="菜单地址"></el-input>
                        </el-form-item>
                        <el-form-item v-if="moreSearch" label="菜单标识">
                            <el-input v-model="searchFrom.menuLogo" placeholder="菜单标识"></el-input>
                        </el-form-item>
                        <el-form-item v-if="moreSearch" label="父级编号">
                            <el-input v-model="searchFrom.menuParentCode" placeholder="父级编号"></el-input>
                        </el-form-item>
            <el-form-item label="更多">
                <el-switch v-model="moreSearch" @change="moreChange">
                </el-switch>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                <el-button type="primary" @click="addMenu"><i class="el-icon-plus" />新增</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
            <el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
                <template slot-scope="{row}">
                    <template v-if="item.type == 'select'">
                        <span>{{ translation[item.field][row[item.field]] }}</span>
                    </template>
                    <template>
                        <span>{{ row[item.field] }}</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" size="mini" @click="editMenu(scope.$index, scope.row)">编辑</el-button>
                    <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteMenu(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
                       :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                       background>
        </el-pagination>
        <el-dialog width="40%" title="功能菜单信息" :visible.sync="menuAddFormVisible" center>
            <menuEdit :menuInfo="menuInfo" />
            <span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="menuAddFormVisible = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
			</span>
        </el-dialog>
    </div>
</template>
<script>
    import request from '@/utils/request'
    import menuEdit from '@/views/system/menu/menu-edit.vue'
    export default {
        name: 'menuList',
        components: {
            menuEdit
        },
        data() {
            return {
                //更多检索条件
                moreSearch: true,
                //弹窗是否可见
                menuAddFormVisible: false,
                //搜索表单
                searchFrom: {
                    pageNo: 1,
                    pageSize: 10
                },
                //表的下拉数据
                tableList: [],
                //正在编辑的用户信息
                menuInfo: {
                menuId: "",
                menuCode: "",
                menuName: "",
                menuUrl: "",
                menuLogo: "",
                menuParentCode: "",
                },
                //表头
                tableColumn: [
                {
                    field: 'menuId',
                    title: '菜单id',
                },
                {
                    field: 'menuCode',
                    title: '菜单编号',
                },
                {
                    field: 'menuName',
                    title: '菜单名称',
                },
                {
                    field: 'menuUrl',
                    title: '菜单地址',
                },
                {
                    field: 'menuLogo',
                    title: '菜单标识',
                },
                {
                    field: 'menuParentCode',
                    title: '父级编号',
                },
                ],
                //数据转译
                translation: {
                },
                //所有的下拉选项
                options:{
                },
                //查询方式列表
                listLoading: false,
                //数据列表
                list: null,
                //分页相关参数
                page: {
                pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0,
                    currentPage: 1
                }
            }
        },
        //页面初始化加载
        created() {
            this.getList();
        },
        methods: {
            //查询列表
            getList() {
                this.searchFrom['pageNo'] = this.page.currentPage
                this.searchFrom['pageSize'] = this.page.pageSize
                request({
                    url: '/system/menu/queryByPage',
                    method: 'post',
                    data: this.searchFrom
                }).then(response => {
                    this.list = response.data.list
                    this.page.total = response.data.total
                    this.page.currentPage = response.data.pageNum
                })
            },
            //保存用户信息
            save() {
                var url = '/system/menu/insert';
                if (this.menuInfo.menuId) {
                    url = '/system/menu/update';
                }
                request({
                    url: url,
                    method: 'post',
                    data: this.menuInfo
                }).then(response => {
                    const h = this.$createElement;
                    this.$notify({
                        title: '提示信息',
                        message: h('i', {
                            style: 'color: teal'
                        }, response.message)
                    });
                    this.getList();
                    this.menuAddFormVisible = false;
                })
            },
            //添加
            addMenu() {
                this.menuInfo = {};
                this.menuAddFormVisible = true;
            },
            //编辑
            editMenu(index, row) {
                this.menuInfo =  {
                menuId: "",
                menuCode: "",
                menuName: "",
                menuUrl: "",
                menuLogo: "",
                menuParentCode: "",
                }
                this.menuInfo = row;
                this.menuAddFormVisible = true;
            },
            //删除用户
            deleteMenu(index, row) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmDelete(row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //确认删除操作
            confirmDelete(row) {
                var url = '/system/menu/delete';
                request({
                    url: url,
                    method: 'post',
                    data: row
                }).then(response => {
                    const h = this.$createElement;
                    this.$notify({
                        title: '提示信息',
                        message: h('i', {
                            style: 'color: teal'
                        }, response.message)
                    });
                    this.getList();
                    this.menuAddFormVisible = false;
                })
            },
            //分页数量修改
            pageSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.getList();
            },
            //页码修改
            currentPageChange(page) {
                this.page.currentPage = page;
                this.getList();
            },
            //更多查询条件
            moreChange() {
                this.searchFrom["menuId"] = null;
                this.searchFrom["menuCode"] = null;
                this.searchFrom["menuName"] = null;
                this.searchFrom["menuUrl"] = null;
                this.searchFrom["menuLogo"] = null;
                this.searchFrom["menuParentCode"] = null;
            },
        }
    }
</script>